<template>
  <!--诉讼管理-->
  <section class="page system-parameter-manage">
    <data-form :model="queryModel" @handleResetForm="follFeedback" @onSearch="refreshData" autoSearch>
      <!--输入区域-->
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="queryModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="queryModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="queryModel.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="queryModel.idCard"></el-input>
        </el-form-item>
        <el-form-item label="案件金额" prop="caseMoney">
          <number-range :isInteger="true" v-model="queryModel.caseMoney"></number-range>
        </el-form-item>
        <el-form-item label="欠款金额" prop="outAmount">
          <number-range v-model="queryModel.outAmount"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <el-select clearable placeholder="请选择" v-model="queryModel.overduePeriod">
            <el-option :key="index" :label="name" :value="code.replace(/M|\+/, '')" v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数">
          <number-range v-model="queryModel.overdueDays"></number-range>
        </el-form-item>
        <el-form-item label="产品类型" prop="productCategory">
          <el-input v-model="queryModel.productCategory"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="queryModel.productName"></el-input>
        </el-form-item>
        <el-form-item label="诉讼编号" prop="lawNumber">
          <el-input v-model="queryModel.lawNumber"></el-input>
        </el-form-item>
        <el-form-item label="案件创建时间" prop="creatTime">
          <el-date-picker :editable="false" clearable placeholder="选择日期时间" type="daterange" v-model="queryModel.creatTime"></el-date-picker>
        </el-form-item>
        <el-form-item label="案件标签" prop="labelName">
          <get-label-name :formModel="queryModel" v-model="queryModel.labelName"></get-label-name>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="stayDataList" :page="pageService" :selectionList.sync="selectionList" @onPageChange="refreshData">
      <template slot="buttons">
        <el-button @click="selectCase" v-auth="1025">分案</el-button>
      </template>
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column :min-width="$helper.getColumnWidth(8)" label="订单编号">
          <template slot-scope="scope">
            <el-button @click="openExecutionPage(scope.row)" type="text">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="诉讼编号" prop="lawNumber"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="客户姓名" prop="personalName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="手机号" prop="mobileNo"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(8)" label="身份证号" prop="idCard"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="地区" prop="area"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="案件金额(元)" prop="caseMoney"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="欠款金额(元)" prop="overdueAmount"></el-table-column>
        <el-table-column :formatter="row => $common.isNotValue(row.overduePeriod) ? '':`M${row.overduePeriod}`" :min-width="$helper.getColumnWidth(3)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="逾期天数" prop="overdueDays"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="产品类型" prop="productCategory"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="产品名称" prop="productName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="电催/外访催收员" prop="currentCollectorName"></el-table-column>
        <el-table-column :formatter="(row) => $filter.dateTimeFormat(row.createTime)" :min-width="$helper.getColumnWidth(5)" label="案件创建时间" prop="createTime"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="案件标签" prop="labelName"></el-table-column>
      </template>
    </data-box>

    <!--弹框-分案-->
    <el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="dialog.selectEntrusted" @close="dialog.selectEntrusted = false" @open="$nextTick(()=>$refs['select-entrusted'].refresh())" title="选择受托方">
      <select-entrusted :isLawsuit="true" :selectedCaseIds="selectedCaseIds" @close="dialog.selectEntrusted=false" @success="refreshData" ref="select-entrusted"></select-entrusted>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import NumberRange from "~/components/common/number-range.vue";
import SelectEntrusted from "~/components/outsource-manage/case-allot/select-entrusted.vue";
import { namespace } from "vuex-class";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";

import { OutsourceLawsuitStayService } from "~/services/domain-service/outsource-lawsuit-manage.service";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import GetLabelName from "~/components/labeling-strategy/get-label-name.vue";

@Auth(1010)
@Layout("workspace")
@Component({
  components: {
    GetLabelName,
    NumberRange,
    SelectEntrusted
  }
})
export default class LawsuitManageIndex extends Vue {
  @Dependencies(OutsourceLawsuitStayService)
  private outsourceLawsuitStayService: OutsourceLawsuitStayService;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(SortService) private sortService: SortService;

  private dialog: any = {
    selectEntrusted: false
  };

  private queryModel: any = {
    caseNumber: "",
    personalName: "",
    mobileNo: "",
    idCard: "",
    departmentType: "",
    outAmount: {
      max: "",
      min: ""
    },
    caseMoney: { min: "", max: "" },
    overduePeriod: "",
    overdueDays: {
      max: "",
      min: ""
    },
    turnSource: "",
    productCategory: "",
    creatTime: [],
    lawNumber: "",
    labelName: ""
  };
  private stayDataList: any[] = []; //数据列表
  private selectionList: any[] = []; //选中数据
  private temp: any = {}; //选中数据
  private tempData: any = [];

  private mounted() {
    this.refreshData();
  }

  private selectCase() {
    if (this.selectionList.length === 0) {
      this.$message.info("请选择需要分案的案件");
      return;
    }
    this.dialog.selectEntrusted = true;
  }

  private refreshData() {
    //默认加载列表
    this.outsourceLawsuitStayService
      .searchPendingList(this.queryModel, this.pageService, this.sortService)
      .subscribe(data => {
        this.stayDataList = data;
        this.selectionList = [];
      });
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.caseId, {
      menuChannel: MENU_CHANNEL.Outsource_lawsuit_await,
      hiddenCaseList: true,
      hiddenAction: true
    });
  }

  // 重置numberRange
  private follFeedback() {
    this.queryModel.outAmount = { min: "", max: "" };
    this.queryModel.overdueDays = { min: "", max: "" };
    this.queryModel.caseMoney = { min: "", max: "" };
  }

  private get selectedCaseIds() {
    return this.selectionList.map(v => v.id);
  }
}
</script>

<style lang="less">
</style>
